<%--
  Created by IntelliJ IDEA.
  User: Chokeremy
  Date: 2023/7/1
  Time: 16:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>编辑出库</title>
  <script src="./js/vue.js"></script>
  <script src="./elementui/index.js" type="module"></script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
  <script src="//unpkg.com/element-ui@2.15.13/lib/index.js" ></script>
  <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-page-header @back="goBack" content="编辑页面">
  </el-page-header>
  <el-alert v-if="showSuccessAlert" title="操作提示：" type="success" show-icon @close="showSuccessAlert = false">
    修改成功！
  </el-alert>
  <el-alert v-if="showErrorAlert" title="操作提示：" type="error" description="修改失败" show-icon @close="showSuccessAlert = false">
  </el-alert>

  <el-form :model="form" :rules="rules" ref="form" label-width="80px" style="width: 500px;margin: 0 auto;margin-top: 100px">
    <el-form-item label="出库药品" prop="medicineId">
      <el-select v-model="form.medicineId">
        <el-option v-for="item in medicineList"
                   :label="item.nAME"
                   :value="item.mEDICINE_ID"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="客户名称" prop="customer">
      <el-input v-model="form.customer"></el-input>
    </el-form-item>
    <el-form-item label="出货日期" prop="exportDate">
      <el-date-picker
              v-model="form.exportDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="出货数量" prop="quantity">
      <%--            <el-input v-model="form.quantity" @blur="handBlur"></el-input>--%>
      <el-input-number v-model="form.quantity" @change="handleChange" @blur="handBlur" :min="0" :max="100000" label="描述文字">    </el-input-number>
    </el-form-item>
    <el-form-item label="单价" prop="unitPrice">
      <%--            <el-input v-model="form.unitPrice" @blur="handBlur2"></el-input>--%>
      <el-input-number v-model="form.unitPrice" @change="handleChange2" @blur="handBlur2" :precision="2" :step="0.1" :max="100000"></el-input-number>
    </el-form-item>
    <el-form-item label="总价" prop="totalPrice">
      <el-input v-model="form.totalPrice" readonly></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      form: {
        exportNo: '',
        medicineId: '',
        customer: '',
        exportDate: '',
        quantity: '',
        unitPrice: '',
        totalPrice: '',
        status: 0,
      },
      rules: {
        medicines: [
          {required: true, message: '请选择药品', trigger: 'change'},
        ],
        customer: [
          {required: true, message: '请输入客户名称', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        exportDate: [
          {required: true, message: '请输入出库日期', trigger: 'blur'}
          // {pattern: /^\d+\-\d{1,2}\-\d{1,2}$/, message: '请输入正确的格式', trigger: 'blur'}
        ],
        quantity: [
          {required: true, message: '请输入出货数量', trigger: 'blur'}
          // {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        unitPrice: [
          {required: true, message: '请输入单价', trigger: 'blur'},
          // {pattern: /^\d{0,8}(\.\d{0,2})?$/, message: '请输入正确的格式', trigger: 'blur'}
        ]
        // totalPrice: [
        //     {required: true, message: '请输入总价', trigger: 'blur'},
        //     {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        // ]
      },
      showSuccessAlert: false,
      showErrorAlert: false,
      medicineList: []
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            $.ajax({
              url: 'Export_infoServlet?tag=editSave',
              type: 'post',
              data: this.form,
              success: function (data) {
                if (data) {
                  app.showSuccessAlert = true; // 显示成功提示框
                } else {
                  app.showErrorAlert = true;
                }
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      goBack() {
        parent.vue.iframeUrl = 'export.jsp';
      },
      handBlur() {
        if (this.form.unitPrice !== "") {
          this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
        }
      },
      handBlur2() {
        if (this.form.quantity !== "") {
          this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
        }
      },
      handleChange(){
        if (this.form.unitPrice !== "") {
          this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
        }
      },
      handleChange2(){
        if (this.form.quantity !== "") {
          this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
        }
      },
      getFormData(){
        // 获取URL参数
        var urlParams = new URLSearchParams(window.location.search);

        // 获取ID参数的值
        var id = urlParams.get('exportNo');
        var _this = this;
        $.get('Export_infoServlet?tag=edit&exportNo=' + id, {pageSize:10000}, function (data) {console.log(data)

          _this.form.customer = data.export.customer;
          _this.form.exportDate = data.export.exportDate;
          _this.form.quantity = data.export.quantity;
          _this.form.unitPrice = data.export.unitPrice;
          _this.form.totalPrice = data.export.totalPrice;
          _this.form.exportNo = data.export.exportNo;
          _this.form.medicineId = data.export.medicineInfo.nAME;
          _this.medicineList = data.medicines.list;
        })
      }
    },
    mounted() {
      this.getFormData();
    }
  });
</script>
</html>
